<template>
    <div>

        <!-- 分类id区域 -->
        <el-card>
            <CategorySelector @get3Id="getCategory3Id" :scene="scene"></CategorySelector>
        </el-card>
        <!-- table表单区/ -->
        <el-card v-show="scene === 0" style="margin-top: 15px ;">
            <el-button type="primary" class="el-icon-circle-plus" size="big" @click='show'
                :disabled="categoryAllId.category3Id ? false : true">
                添加属性
            </el-button>
            <el-table border style="width: 100%" :data="attrList">
                <el-table-column label="序号" width="180" type="index">
                </el-table-column>
                <el-table-column label="属性名称" width="180" prop="attrName">
                </el-table-column>
                <el-table-column label="属性值列表">
                    <template slot-scope="{row,index}">
                        <el-tag :type="item.id % 2 == 0 ? 'warning' : 'danger'" v-for="item in row.attrValueList"
                            :key="item.id">{{ item.valueName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row,index}">
                        <el-button title="修改属性" type="primary" class='el-icon-edit' @click="addOrUpdate(row)">
                        </el-button>
                        <el-button title="删除属性" type="danger" class='el-icon-delete' @click="deleteAttr(row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 点击添加属性/修改属性更换到修改界面 -->
        <el-card v-show="scene === 1" style="margin-top: 15px ;">
            <el-form>
                <el-form-item label="属性名">
                    <el-input placeholder="请输入属性名" v-model="attr.attrName" style="width:200px ;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-plus" :disabled="attr.attrName ? false : true"
                        @click="addAttrValue">添加属性值</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
            <el-table border style="width: 100%" :data="attr.attrValueList">
                <el-table-column label="序号" type="index" width="180">
                </el-table-column>
                <el-table-column label="属性值名称" width="180">
                    <template slot-scope="{row,$index}">
                        <!-- 使用Element-ui，因为Element-ui是封装组件，这个时候使用按键修饰符需要加上.native覆盖原有封装的keyup事件即可，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签 -->
                        <el-input ref="reference" v-if="row.edit" v-model="row.valueName" placeholder="请输入名称"
                            @blur="toList(row)" @keyup.enter.native="toList(row)" size="mini"></el-input>
                        <span v-else @click="toEdit(row)">{{ row.valueName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row, $index }">
                        <!-- <el-button class="el-icon-delete" type="danger" title="删除" @click="deleteAttrValue($index)"></el-button> -->
                        <el-popconfirm :title="`确定删除 ${row.valueName} 吗?`"
                            @confirm="attr.attrValueList.splice($index, 1)">
                            <el-button style="margin-left:10px" slot="reference" title="删除" type="danger"
                                icon="el-icon-delete" size="mini"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" :disabled="!attr.attrName || attr.attrValueList.length == 0" @click="add">保存
            </el-button>
            <el-button @click="cancel">取消</el-button>
        </el-card>

    </div>
</template>
<script>
import { mapState } from 'vuex';
import _ from 'lodash'
export default {
    data() {
        return {
            attr: {
                attrName: '',//属性名称
                categoryId: '',//三级分类的id
                categoryLevel: 3,//三级分类
                attrValueList: [],//属性值列表
            },//一个商品的数据
            scene: 0,//控制修改 添加表单的显示和隐藏
            categoryAllId: '', //123级id 删除需要重新发请求需要用
        }
    },
    mounted() {

    },
    methods: {
        getCategory3Id(id) {
            this.categoryAllId = id
            this.$store.dispatch('getAttrList', id)
        },
        // 点击删除按钮的回调
        async deleteAttr(row) {
            // console.log(row);
            let id = row.id
            const result = await this.$API.attr.remove(id)
            this.$message.success(result.message || '删除属性成功')
            this.getCategory3Id(this.categoryAllId)
        },
        // 点击修改的回调
        addOrUpdate(row) {
            // // console.log('123');
            this.scene = 1
            this.attr = _.cloneDeep(row)
            // row.valuelist=[]= attr.valuelist

        },
        // 点击添加的回调
        show() {
            // // 清空商品的数据
            // // this.attr={}
            this.attr = {
                categoryLevel: 3,
                attrValueList: []
            },
                this.attr.categoryId = this.categoryAllId.category3Id
            this.scene = 1
        },
        // 点击弹出列表里的删除按钮
        // deleteAttrValue(index) {
        //     this.attr.attrValueList.splice(index, 1)
        // },
        // 点击弹出列表里的确定按钮
        async add() {
            // 在发请求需要对数据进行必要的整理与检查操作
            // 没有指定属性值名称的属性也会提交给后台
            let { attr } = this
            // 提交的数据中包含没必要的edit属性
            attr.attrValueList = attr.attrValueList.filter((item) => {
                if (item.valueName) {
                    delete item.edit
                    return true
                }
                return false
            })
            try {
                console.log(attr);
                // 发添加或更新的请求
                await this.$API.attr.save(attr)  // attr中有id是更新, 没有id是保存
                // console.log(result);
                // 提示成功
                this.$message.success('保存属性成功')
                this.scene = 0
                // 重新获取属性列表显示
                this.getCategory3Id(this.categoryAllId)
                // console.log(this.attrList);
            } catch (error) { // 可以不用catch
                // 如果失败了, 提示请求失败
                // this.$message.error('保存属性失败')
            }
        },
        // 点击弹出表单里的取消按钮
        cancel() {
            this.scene = 0
            // console.log(this.attrList)
        },
        // 点击弹出表单里的添加属性值按钮
        addAttrValue() {
            // 创建一个新的平台属性值对象
            const attrValue = {
                valueName: '',// 要有属性值名称valueName
                edit: true,// 点击添加进入编辑模式
            }
            //  添加到对应的数组
            this.attr.attrValueList.push(attrValue)
            this.attr.attrValueList = [ ...this.attr.attrValueList]  //浅拷贝了一份 你变我也变
            // 让光标自动聚焦到每一个新增的input框上
            this.$nextTick(() => this.$refs.reference.focus())//因为我们都知道，vue的钩子函数created，
            // 在调用的时候，Dom还没有进行任何渲染，如果我们直接执行this.$refs.xxxx.focus()这个代码的话，是没有效果的，因此需要使用this.$nextTick()，将它延迟到下次Dom渲染的时候执行
        },
        // 点击弹出表单里的属性值的每一项 切换成查看模式
        toList(row) {
            // console.log('查看模式');
            //   这里要判断输入框的数据，如果input里的数据为空，那还是编辑模式
            if (row.valueName.trim() == '') {
                this.$message.warning('输入的内容不能为空')
                return
            }
            // console.log('123');
            //  判断输入框输入的内容，如果输入框输入的内容与原本已有重复了，那应该还是编辑模式，并提示
            const isRepeat = this.attr.attrValueList.filter(item => item.valueName == row.valueName).length == 2
            // console.log(isRepeat);
            if (isRepeat) {
                this.$message.warning('输入的内容不能重复')
                attr.valueName = ''  //清空输入内容
                return
            }
            row.edit = false
        },
        // 点击弹出表单里的属性值的每一项 切换成编辑模式
        toEdit(row) {
            // console.log('编辑模式');
            console.log(row);
            //  row就是平台属性对象 attrValue
            // hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性，如果是，返回true，否者false; 参数propertyName指要检测的属性名；
            // propertyName必须是字符串
            if (row.hasOwnProperty('edit')) {
                row.edit = true
            } else {//如果没有
                // 使用this.$set(target, key, value)时，target为需要添加属性的对象，key是要添加的属性名，value为属性key对应的值。
                this.$set(row, 'edit', true)
            }
        }
    },
    computed: {
        ...mapState({
            attrList: (state) => state.attr.attrList
        }),
    },
    // watch: {
    //     category3Id: function () {
    //         this.$store.dispatch('clearList')
    //     }
    // }
}
</script>

<style scoped>

</style>